<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="利润统计"
    :showCancelBtn="false" :showOkBtn="false" :canFullscreen="false" :centered="true"
    :width="800" wrapClassName="order-detail"
    :bodyStyle="{height:'calc(100vh - 250px)', overflowY:'hidden'}"
  >
    <div style="zoom: 1;  padding: 0 10px 10px; margin-top: 10px;">

       <!--团队利润 min-width:800px;-->
       <div class="orderInfo">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            团队名称：{{queryParam.capitalName}}
          </span>
          <span class="float-right h-30px leading-30px font-bold text-lg" >
            
          </span>
        </div>
        <table class="orderTable " id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-80px">放款金额</th>
            <td class="w-150px text-red-500 text-right">{{orders.amountTotal}}</td>
            <th class="w-80px">区域毛利</th>
            <td class="w-150px text-red-500 text-right">{{orders.zfProfitGross}}</td>
            <th class="w-80px">区域利润</th>
            <td class="w-150px text-red-500 text-right">{{orders.qyProfitNet}}</td>
            <th class="w-80px">区域分红</th>
            <td class="w-150px text-red-500 text-right">{{orders.qyProfitShare}}</td>
          </tr>
          <tr class="h-35px">
            <th class="w-80px">放款台次</th>
            <td class="w-150px text-right">{{orders.orderCount}}</td>
            <th class="w-80px"><div v-if="hasPermission('order:shareholder')">股东毛利</div></th>
            <td class="w-150px text-blue-500 text-right"><div v-if="hasPermission('order:shareholder')">{{orders.nbProfitGross}}</div></td>
            <th class="w-80px"><div v-if="hasPermission('order:shareholder')">股东利润</div></th>
            <td class="w-150px text-blue-500 text-right"><div v-if="hasPermission('order:shareholder')"></div></td>
            <th class="w-80px"></th>
            <td class="w-150px text-blue-500 text-right"></td>
          </tr>
          </tbody>
        </table>
      </div>

       <!--区域开支 min-width:800px;-->
       <div class="orderInfo">
        <div class="theadSticky">
          <span class="float-left h-30px leading-30px w150 font-bold text-lg">
            区域开支
          </span>
          <span class="float-right h-30px leading-30px font-bold text-lg" >
            
          </span>
        </div>
        <table class="orderTable" id="orderTable" >
          <tbody>
          <tr class="h-35px">
            <th class="w-180px text-left">收支项目</th>
            <th class="w-60px text-right">收入金额</th>
            <th class="w-60px text-right">支出金额</th>
            <th class="w-60px text-center">收付日期</th>
            <th class="w-40px text-center">操作人</th>
            <th class="w-70px text-center">操作时间</th>
          </tr>
          <tr class="h-35px" v-for="account in accounts">
            <td class="tips text-left">{{account.pathName}}</td>
            <td class="tips text-right text-red-500 font-500">{{account.skje}}</td>
            <td class="tips text-right text-green-500 font-500">{{account.fkje}}</td>
            <td class="tips">{{account.sfsj}}</td>
            <td class="tips">{{account.createBy}}</td>
            <td class="tips ">{{account.createTime}}</td>
          </tr>
          </tbody>
          <tfoot>
          <tr class="h-35px" >
            <td class="tips text-left">合计</td>
            <td class="tips text-right text-red-500 font-500">{{footers.skje}}</td>
            <td class="tips text-right text-green-500 font-500">{{footers.fkje}}</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          </tfoot>
        </table>
      </div>

      <!---->
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import "/@/design/order.css";
  import { nextTick, ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from "/@/hooks/web/useMessage";
  import { departsDetail } from "../api";
  import { usePermission } from '/@/hooks/web/usePermission';

  const { hasPermission } = usePermission();
  const { createMessage: $message } = useMessage();
  // Emits声明
  const emit = defineEmits(['register', 'success']);

  let loading     = ref(true);
  //资方产品
  let orders   = reactive<any>({});
  let accounts = reactive<any>([]);
  let footers  = reactive<any>({});

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  let queryParam = reactive<any>({
    beginDate : '',
    endDate: '',
    customerId: '',
  });

  //------------------------------------------

  //TODO ------界面初始化---加载数据 -> 根据数据初始表单-------------
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    // setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    // isUpdate.value = !!data?.isUpdate;

    //显示查询参数
    //Object.assign(queryParam, data.record);

    queryParam = {
      beginDate : data.record.beginDate,
      endDate: data.record.endDate,
      id: data.record.id
    }

    //初始化数据
    orderTable()
    
    loading.value = true
  });

  //订单界面所有信息
  async function orderTable() {

    if (!queryParam.id) {
      $message.error("操作失败：订单编号为空!");
      return;
    }

    orders.length = 0;
    accounts.length = 0;
    footers.length = 0;

    loading.value = true; 
    await departsDetail(queryParam).then((res) => {
      try {
        console.info(res);
        if (res.success == false) {
          $message.warning(res.message);
          return false;
        }
        let result = res.result;
        //1、业务数据 - 初始化
        Object.assign(orders, result.orders);
        Object.assign(accounts, result.accounts);
        Object.assign(footers, result.footers);

      } catch (e) {
        alert(e);
        return false;
      }
    }).finally(() => {
      loading.value = false;
    });
  }
</script>

<style lang="less" scoped>

// newCode：新代码改为
body,html {
  width: 100%;
  min-height: 100vh;
}
.orderTable .ant-form-item {
  margin-bottom: 0px;
}

.theadSticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 10;

  padding:6px 4px;
  background:#fff;
  border: 1px solid #d6dde7;
  height: 42px;
  line-height: 30px;
  margin-bottom: -1px;
  font-size: 16px;
}

td p {
  text-align: left;
  span {
    display:inline-block;
  }
}
</style>